HTML Attributes দিয়ে আমরা এইচটিএমএল এ কিছু স্টাইল দিতে পারি। আর সে জন্য এইচটিএমএল এ প্রতিটি ট্যাগ এর জন্য আলাদা করে স্টাইল গুলো লিখতে হয়। কিন্তু আমরা যদি একটি ভালো মানের ওয়েব সাইট তৈরি করতে চাই, তাহলে দরকার সিএসএস। CSS এর পূর্ন রূপ হচ্ছে Cascading Style Sheets। একটি এইচটিএমএল ফাইলের বিভিন্ন উপাদান গুলো কিভাবে দেখাবে যেমন রঙ, ফন্ট সাইজ, মার্জিন, প্যাডিং ইত্যাদি সিএসএস দিয়ে নির্ধারণ করা হয়।
.jpg)
এইচটিএমএল এ সিএসএস যোগ করার তিনটি পদ্ধতি রয়েছেঃ
- Internal style sheet
CSS কিভাবে যুক্ত করব তা দেখার আগে CSS Syntax সম্পর্কে একটু আলোচনা করা যাক।
সিএসএস হচ্ছে কত গুলো রুল/ নিয়ম এর সমষ্টি। যাকে সিএসএস রুল বলে। প্রতিটি সিএসএস রুল এর দুটি অংশ রয়েছে।
- একটা হচ্ছে selector – যে খানে ঐ সিএসএস রুলটি প্রয়োগ হবে।
- অন্যটি হচ্ছে declarations।
selector সাধারনত এইচটিএমএল এর উপাদান গুলো হয়ে থাকে যেমনঃ h1, body, p, ul ইত্যাদি। একই সিলেক্টরের একের অধিক ডিক্লারেশন থাকতে পারে। Declaration এর আবার দুইটি অংশ রয়েছে। একটা হচ্ছে property আরেকটা হচ্ছে value। property মানে হচ্ছে বৈশিষ্ট্য যেমন: color, font-size, background ইত্যাদি। value হচ্ছে মান। এক একটা property এর মান একেক রকম। property লিখে কোলন দিয়ে তারপর value লিখতে হয়।
সিএসএস রুল লেখার জন্য selector লিখে তারপর দ্বিতীয় ব্র্যাকেটের মধ্যে declarations গুলো লেখা হয়। তারপর দ্বিতীয় ব্র্যাকেট শেষ করা হয়। একের অধিক declarations থাকলে সে গুলো সেমিকোলন দিয়ে লিখতে হয়। নিচের ছবিটি দেখুন। ছবিটির মধ্যে সব কিছু স্পষ্ট করে দেওয়া আছে।
.png)
External style sheet
একই স্টাইল একের অধিক এইচটিএমএল ফাইলে যুক্ত করার জন্য External style sheet ব্যবহার করা হয়। আমরা যত ওয়েবসাইট দেখি, সব গুলোই External style sheet দিয়ে তৈরি করা। External style sheet এর সুবিধে হচ্ছে একই সাথে সব গুলো ওয়েব পেইজে স্টাইল দেওয়া বা স্টাইল পরিবর্তন করা । যা অনেক কাজ কমিয়ে দেয়। একটি css ফাইল তৈরি করে সব স্ট্যাইল ঐ css ফাইলে লেখা হয়। তারপর তা এইচটিএমএল ফাইলে যুক্ত করা হয়।
External style sheet এইচটিএমএল ফাইলে যুক্ত করার জন্য head ট্যাগ এর ভেতর নিচের মত করে লেখা হয়।
একটি ফাইল তৈরি করুন। তার নাম দিন style.css এবং নিচের কোড গুলো তার ভেতর লিখে সংরক্ষন/সেভ করুন।
এবার একটি html ফাইল তৈরি করুন। নিচের কোড গুলো তার ভেতর লিখুন/পেস্ট করুন। তারপর সেভ করে ব্রাউজারে দেখুন।
বিদ্রঃ সিএসএস এবং এইচটিএমএল ফাইল দুটি একই ডিরেক্টরিতে / ফোল্ডার থাকতে হবে। যদি অন্য কোন ডিরেক্টরিতে তাহলে তার সম্পুর্ন এড্রেস href=”style.css” এর মধ্যে লিখতে হবে। যেমনঃ href=”mystyle/style.css” . style.css হচ্ছে আপনার স্টাইল শীট এর নাম অন্য কোন নাম ও আপনি দিতে পারেন।
Internal Style Sheet
একটি নির্দিষ্ট এইচটিএমএল ফাইলে স্টাইল দেওয়ার জন্য Internal Style Sheet ব্যবহার করা হয়। Internal Style Sheet ব্যবহার করলে যতগুলো ওয়েব পেইজ থাকবে সব গুলোর জন্য আলাদা আলাদা ভাবে সিএসএস কোড লিখতে হবে। Internal Style Sheet ও ওয়েব পেইজ / এইচটিএমএল পেইজের head ট্যাগ এর ভেতর লিখতে হয়। তার জন্য head ট্যাগ এর ভেতর style নামে আরেকটা ট্যাগ এর ভেতর সিএসএস এর রুল গুলো লেখা হয়। নিচের মত করে একটি এইচটিএমএল ফাইলে Internal Style Sheet লেখা হয়ঃ
Internal Style Sheet এর কোড গুলোঃ
Inline Styles
এইচটিএমএল এর একটা নির্দিষ্ট ইলিম্যান্ট এ স্টাইল দেওয়ার জন্য Inline Styles ব্যবহার করা হয়। যদিও এটা এইচটিএমএল ফাইলে স্টাইল দেওয়ার জন্য একটা ভালো উপায় নয়। একটা এইচটিএমএল ট্যাগ এর ভেতর Inline Styles নিচের মত করে লেখা হয়ঃ
Inline Styles এর গুলোঃ
একটি ওয়েব সাইটে একের অধিক সিএসএস ফাইল থাকতে পারে। তার জন্য সব গুলোকে head এর ভেতর যুক্ত করতে হয়ঃ
তো বন্ধুরা আজকের পোস্ট এখানেই শেষ। ধন্যবাদ।
.png){kind=logo}
ডাউলোড করে নিন ফ্রী আইপিটিভি m3u 
ফটোগ্রাফিতে ইতিহাস সৃষ্টি করবে Vivo X70 pro 🙀 
IPhone 13-এ Call করা যাবে Network ছাড়াই 
No responses to সিএসএস টিউটোরিয়াল [১ম পার্ট]
Be first Make a comment.